<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>yooblog</title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./css/animate.min.css" />
		<!-- <link
		    rel="stylesheet"
		    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
		  /> -->
		<style>
			:root {
				--animate-duration: 2400ms;
			}

			.div-center {
				display: inline-block
			}

			.div-delay1 {
				-webkit-animation-delay: 300ms;
				animation-delay: 300ms;
			}

			.div-delay2 {
				-webkit-animation-delay: 600ms;
				animation-delay: 600ms;
			}

			.div-delay3 {
				-webkit-animation-delay: 1200ms;
				animation-delay: 1200ms;
			}

			.div-delay4 {
				-webkit-animation-delay: 1500ms;
				animation-delay: 1500ms;
			}

			.div-delay5 {
				-webkit-animation-delay: 1800ms;
				animation-delay: 1800ms;
			}

			.div-delay6 {
				-webkit-animation-delay: 2100ms;
				animation-delay: 2100ms;
			}

			.div-shadow {
				text-shadow: 0.3125rem 0.125rem 0.375rem #000000;
				font-size: 1.5625rem;
			}
		</style>
	</head>
	<body>
		<div id="app" style="text-align: center;margin-top: 12.5rem;">
			<div v-bind:class="bounceAnimate">L</div>
			<div v-bind:class="bounceAnimate" class="div-delay1">o</div>
			<div v-bind:class="bounceAnimate" class="div-delay2">a</div>
			<div v-bind:class="bounceAnimate" class="div-delay3">d</div>
			<div v-bind:class="bounceAnimate" class="div-delay4">i</div>
			<div v-bind:class="bounceAnimate" class="div-delay5">n</div>
			<div v-bind:class="bounceAnimate" class="div-delay6">g</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: {
				times:3,
				bounceAnimate: "animate__animated animate__infinite animate__bounce div-center div-shadow",
			},
			created:function() {
				this.countDown()
			},
			methods:{
				countDown:function(){
					this.timer = setInterval(()=>{
						this.times --
						if(this.times == 0 || this.times == undefined){
							clearInterval(this.timer)
							//打开新的页面
						}
					},1000)
				}
			}
		})
	</script>
</html>
